<template>
  <div class="dashboardPage">
    <div class="total-top">
      <p class="p-title">统计数据</p>
      <div class="toggle" @click="isShow = !isShow">
        <span class="text">{{ isShow? '收起' : '展开' }}</span>
        <el-icon v-if="isShow" :size="20" class="el-icon"><ArrowUpBold /></el-icon>
        <el-icon v-else :size="20" class="el-icon"><ArrowDownBold /></el-icon>
      </div>
    </div>
    <div v-if="isShow" class="top">
      <CardBox
        v-for="item in cardList"
        :key="item.value"
        :card-data="item"
        :title="item.title"
        :color="item.color"
        :background-color="item.background"
        :today-color="item.todayColor"
        class="cardbox"
      />
    </div>
    <div class="content">
      <div class="cont-top">
        <div class="brief">
          <h3 class="h3">Zkmall商城-B2B2C多商户 平台端</h3>
          <p class="p">ZKMALL商城-B2B2C多商户 平台端、基于Vue3 Vite ElementPlus 技术研发、系统采用前后端分离架构、 B2C、O2O、B2B2C商城、SAAS、小程序商城、H5商城、APP商城、java商城、独立的商家管控入口
            本商城致力于为企业打造一个功能完整、易于维护的微服务B2B2C电商商城系统，采用主流技术实现。后台管理系统包含平台管理，店铺管理、商品管理、订单管理、规格管理、权限管理等模块</p>
          <b class="b">当前版本: v3.0.</b>
          <div class="tag">¥免费开源</div>
          <div class="btn-warp">
            <el-button class="btn btn-primary" type="primary" @click="jumpLink('https://gitee.com/zkmall/')"><img class="icon" src="../../assets/images/home/icon.png" />访问码云</el-button>
            <el-button class="btn" @click="jumpLink('https://www.mallzk.com/')"><img class="icon" src="../../assets/images/home/icon2.png" />访问主页</el-button>
          </div>
        </div>
        <div class="technology">
          <h3 class="h3">技术选型</h3>
          <el-table
            class="table"
            :data="tableData"
            border
          >
            <el-table-column label="后端" prop="backend" />
            <el-table-column label="前端" prop="frontend" />
          </el-table>
        </div>
      </div>
      <div class="banner">
        <a href="https://work.weixin.qq.com/kfid/kfc17b8fa3faa835f42" target="_blank"><img class="img" src="../../assets/images/home/banner.png" /></a>
      </div>
    </div>
  </div>
</template>

<script setup>
import CardBox from '@/views/dashboard/components/HomeCard.vue'
import { homeGetFormData } from '@/api/home.js'
import { onMounted, ref } from 'vue';

const isShow = ref(false)
const tableData = ref([{
  backend: 'SpringBoot3',
  frontend: 'Vue3',
}, {
  backend: 'Shiro',
  frontend: 'Vuex',
}, {
  backend: 'JWT',
  frontend: 'Element-ui',
}, {
  backend: 'MybatisPlus',
  frontend: 'Axios',
}, {
  backend: 'Druid',
  frontend: 'sass',
}, {
  backend: 'XXL-Job',
  frontend: 'VueRouter',
}, {
  backend: 'Redisson',
  frontend: 'Vite',
}, {
  backend: 'Redis',
  frontend: 'Echarts',
}, {
  backend: 'Mysql',
  frontend: 'canvas',
}])
const cardList = ref([
  {
    title: '新增用户',
    color: '#1B55AF',
    background: '#F4F7FB',
    todayColor: '#C9D7EC',
    nums: '',
    precent: '',
    lastNums: '',
    value: 1,
  },
  {
    title: '新增店铺',
    color: '#F45F20',
    background: '#FEF7F4',
    todayColor: '#FCD9CA',
    nums: '',
    precent: '',
    lastNums: '',
    value: 2,
  },
  {
    title: '访客',
    color: '#427A0A',
    background: '#F2F6EE',
    todayColor: '#CFDDC0',
    nums: '',
    precent: '',
    lastNums: '',
    value: 3,
  },
  {
    title: '浏览量',
    color: '#623CE7',
    background: '#F4F1FD',
    todayColor: '#D7CDF9',
    nums: '',
    precent: '',
    lastNums: '',
    value: 4,
  },
])

onMounted(() => {
  getFormData()
})

function getFormData () {
  homeGetFormData().then(res => {
    cardList.value[0] = Object.assign(cardList.value[0], {
      nums: res.data.todayNewUser,
      precent: res.data.weekRelativeRatioNewUser,
      lastNums: res.data.yesterdayNewUser,
    })
    cardList.value[1] = Object.assign(cardList.value[1], {
      nums: res.data.todayShopCount,
      precent: res.data.weekRelativeRatioShopCount,
      lastNums: res.data.yesterdayShopCount,
    })
    cardList.value[2] = Object.assign(cardList.value[2], {
      nums: res.data.todayVisitUser,
      precent: res.data.weekRelativeRatioVisitUser,
      lastNums: res.data.yesterdayVisitUser,
    })
    cardList.value[3] = Object.assign(cardList.value[3], {
      nums: res.data.todayVisitCount,
      precent: res.data.weekRelativeRatioVisitCount,
      lastNums: res.data.yesterdayVisitCount,
    })
  })
}

function jumpLink (url) {
  window.open(url)
}
</script>

<style
    lang="scss"
    scoped
>
.dashboardPage {
  width: 100%;
  .total-top{
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
    .p-title {
      padding-left: 20px;
      font-size: 24px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 50px;
      height: 50px;
      margin: 0;
    }
    .toggle{
      display: flex;
      line-height: 50px;
      align-items: center;
      cursor: pointer;
      .text{
        font-size: 20px;
        margin-right: 10px;
      }
      .el-icon{}
    }
  }
  .top {
    padding: 28px 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .cardbox {
      margin: 0 10px;
      cursor: default;
      flex: 1;
    }
  }
  .content{
    .cont-top{
      padding: 0 40px 40px;
      display: flex;
      flex-wrap: wrap;
      .brief{
        width: 700px;
        margin-right: 15%;
        .h3{
          font-size: 30px;
          color: #333333;
          line-height: 43px;
          margin-bottom: 10px;
        }
        .p{
          font-size: 16px;
          color: #6E7079;
          line-height: 24px;
          margin-bottom: 15px;
        }
        .b{
          font-size: 12px;
          color: #3D3D3D;
          line-height: 17px;
          margin-bottom: 40px;
          display: block;
        }
        .tag{
          padding: 5px 10px;
          background: rgba(208,74,65,0.1);
          border-radius: 4px;
          font-size: 14px;
          color: #D04A41;
          line-height: 20px;
          margin-bottom: 16px;
          display: inline-block;
        }
        .btn-warp{
          .btn{
            width: 114px;
            height: 37px;
            .icon{
              margin-right: 4px;
            }
          }
          .btn-primary{
            background-color:#E8F3FF;
            border-color: #E8F3FF;
            color: #3C7ECF;
            &:hover{
              background-color:#D0EBFF;
              border-color: #D0EBFF;
            }
          }
        }
      }
      .technology{
        .h3{
          font-size: 30px;
          color: #333333;
          line-height: 43px;
          margin-bottom: 10px;
          text-align: center;
        }
        :deep(.table){
          width: 300px;
          th.el-table__cell{
            background: rgb(238, 243, 255);
            color: rgb(51, 51, 51);
          }
        }
      }
    }
    .banner{
      padding: 20px;
      background: #F7F7F7;
      .img{
        width: 100%;
      }
    }
  }
}
</style>
